<template>
	<view class="register-page">
		<fui-toast ref="toast"></fui-toast>
		<view class="register-account">
		<view class="account-box">
			<view class="account-box-content">
				<view class="account-box-title">
					<text>设置账号</text>
				</view>
				<view class="account-box-input">
					<input type="text" v-model="username" placeholder="请输入账号" placeholder-class="plc" focus="true" @blur="checkAccount(username)"/>
					<view class="erro" v-show="checkAcountShowFlag">
						<text>账号格式错误!</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="prompt-box">
			<view class="prompt-logo">
				<image src="../../../static/images/notice.png" mode="heightFix"></image>
			</view>
			<view class="prompt-content">
				<text>账号长度限制8-11位,可以是纯数字或者纯字母</text>
			</view>
		</view>
		
		<view class="change-password-box change-top">
			<view class="change-password-title">
				<text>设置密码</text>
			</view>
			<view class="login-password-bottom">
				<view class="user-tel">
					<input :type="eyeflag?'text':'password'" placeholder="请输入密码" :modelValue="password" @update:modelValue="password = $event" placeholder-class="plc" @blur="checkPassword(password)">
					<view class="erro" v-show="checkPasswordShowFlag">
						<text>密码格式错误!</text>
					</view>
				</view>
				<view class="login-password-eye" @click="changeEye()">
					<image  mode="heightFix" :src="eyeflag?'../../../static/images/eye.png':'../../../static/images/eye-hidden.png'" class="changeEye"></image>
				</view>
			</view>
		</view>
		
		<view class="change-password-box">
			<view class="login-password-bottom">
				<view class="user-tel">
					<input :type="eyeflagbot?'text':'password'" placeholder="请输入密码" :modelValue="repassword" @update:modelValue="repassword = $event" placeholder-class="plc" @blur="checkRePassword(repassword)">
					<view class="erro" v-show="checkRePasswordShowFlag">
						<text>{{erroText}}</text>
					</view>
				</view>
				<view class="login-password-eye" @click="changeEyebot()">
					<image  mode="heightFix" :src="eyeflagbot?'../../../static/images/eye.png':'../../../static/images/eye-hidden.png'" class="changeEye"></image>
				</view>
			</view>
		</view>
		
		
		<view class="prompt-box">
			<view class="prompt-logo">
				<image src="../../../static/images/notice.png" mode="heightFix"></image>
			</view>
			<view class="prompt-content">
				<text>密码长度限制8-20位,不是纯数字或者纯字母</text>
			</view>
		</view>
		
		<view class="check-box">
			<button type="warn" @click="backToLogin()">确定</button>
		</view>
		
		</view>
	</view>
</template>

<script setup>
	import { ref,onMounted,reactive,getCurrentInstance } from 'vue'
	import usersApi from '@/static/assets/js/userApi.js'
	import timeOperation from '@/static/assets/js/timeOperation.js'
	
	const username = ref('')
	const eyeflag = ref(false)
	const eyeflagbot = ref(false)
	const checkAcountShowFlag = ref(false)
	const checkPasswordShowFlag = ref(false)
	const checkRePasswordShowFlag = ref(false)
	const password = ref('')
	const repassword = ref('')
	const erroText  = ref("")
	const that = getCurrentInstance()
	const createTime = ref(0)
	const userinfo = reactive({
		password,
		username,
		createTime
	})
	const toastOptions = reactive({
		text:"功能还未实现"
	})
	
	const changeEye = () =>{
		eyeflag.value = !eyeflag.value
		// console.log(eyeflag.value);
	}
	
	const changeEyebot = () =>{
		eyeflagbot.value = !eyeflagbot.value
	}
	
	
	const backToLogin = () =>{
		 createTime.value = timeOperation.getNowTime()
		 console.log(createTime.value = timeOperation.getNowTime());
		if(password.value===''||repassword.value===''||username.value===''){
			// console.log("已进入");
			toastOptions.text = "请将信息输入完整(*￣(エ)￣)"
			that.ctx.$refs.toast.show(toastOptions)
		}else if(checkAcountShowFlag.value==false&&checkPasswordShowFlag.value==false&&checkRePasswordShowFlag.value==false){
			let userData = JSON.stringify(userinfo)
			usersApi.register(userData).then((resp)=>{
				if(resp==10){
					toastOptions.text = "账号已被注册!Σ( ° △ °|||)︴"
					that.ctx.$refs.toast.show(toastOptions)
				}else if(resp==0){
					toastOptions.text = "注册失败!w(ﾟДﾟ)w"
					that.ctx.$refs.toast.show(toastOptions)
				}else if(resp==1){
					toastOptions.text = "注册成功! (๑•̀ㅂ•́)و✧"
					that.ctx.$refs.toast.show(toastOptions)
					uni.navigateBack({
						animationDuration:2000,
						animationType:'fade-out',
						delta:3
					})
				}
			})
		}
	}
	
		
	const checkAccount = (value) =>{
		// console.log("被触发");
		// console.log(value);
		const accountReg =  /^[a-zA-Z0-9]{8,11}$/
		if(value==''||value==null){
			// console.log("值为空");
			checkAcountShowFlag.value = false
		}else{
			// console.log("已进入正则匹配");
			checkAcountShowFlag.value = !accountReg.test(value)
			// console.log(checkAcountShowFlag.value);
		}
	}
	
	const checkPassword = (value) =>{
		// console.log("被触发");
		// console.log(value);
		const passwordReg =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
		if(value==''||value==null){
			// console.log("值为空");
			checkAcountShowFlag.value = false
		}else{
			// console.log("已进入正则匹配");
			checkPasswordShowFlag.value = !passwordReg.test(value)
			// console.log(checkPasswordShowFlag.value);
		}
	}
	
	const checkRePassword = (value) =>{
		// console.log("被触发");
		// console.log(value);
		const passwordReg =  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
		if(value==''||value==null){
			// console.log("值为空");
			checkAcountShowFlag.value = false
		}else{
			if(value!==password.value){
				erroText.value  = "两次输入密码不一致!"
				checkRePasswordShowFlag.value = true
			}else{
				// console.log("已进入正则匹配");
				erroText.value = "密码格式错误!"
				checkRePasswordShowFlag.value = !passwordReg.test(value)
				// console.log(checkRePasswordShowFlag.value);
			}

		}
	}

	
	// console.log(checkAccount("1111111")); 
</script>

<style lang="scss">
	body{
		background-color: #f9f9f9;
		// overflow-y:hidden;
	}
	
	uni-image{
		height: 40rpx;
	}
	
	.plc{
		color: #e1e1e1;
	}
	
	uni-button[type='warn']{
		background-color: #1aa034;
		font-size: 30rpx;
		color: rgba(255,255,255,1);
		width: 100%;
	}
	
.change-password-box{
			width: 100%;
			>.change-password-title{
				margin-top: 20rpx;
				font-size: 34rpx;
				font-weight: 600;
				margin-bottom: 35rpx;
			}
			
			>.login-password-bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				transition: all 1s ease; 
				border-bottom: 1rpx #cbcbca dotted;
				>.user-tel{
					font-weight: 600;
					width: 500rpx;
				}
				>.login-password-eye{
					font-weight: 600;
					height: 100%;
				}
			}
		}
		
.prompt-box{
			// margin-top: 10rpx;
			width: 100%;
			display: flex;
			color: #cbcbca;
		}
		
		.check-box{
			width: 100%;
			margin-top: 65rpx;
		}
		
		.register-account{
			width: 90%;
			display: flex;
			// justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		
		.register-page{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.account-box{
			width: 100%;
			font-size:34rpx;
			font-weight:600;
			margin-bottom: 40rpx;
			
		}
		
		.account-box-title{
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}
		
		
		.account-box-input{
			border-bottom: 1rpx #b7b7b7 dotted;
		}
		
		.erro{
			color:#e33f31 ;
			height: 30rpx;
			font-size: 20rpx;
		}
</style>
